<template>

    <div class="box">
        <div class="one">
            <div class="title">
                <Title :title="props.dataLeftOne.obj1.title"></Title>
            </div>
            <div class="oneTop">
                <div>{{ props.dataLeftOne.obj1.titleTwo.name }}</div>
                <div class="numTotal">{{ props.dataLeftOne.obj1.titleTwo.num }}</div>
            </div>
            <div class="list">
                <div v-for="(item, key) in props.dataLeftOne.obj1.dataList" :key="key" class="listItem">
                    <div class="img_1">
                        <img src="" class="imges_1" alt="">
                    </div>
                    <div class="text">
                        <p class="name">{{ item.name }}</p>
                        <p class="num1"><span class="num_1">{{ item.num }}</span>人</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="two">
            <div class="title">
                <Title :title="props.dataLeftTwo.obj2.title"></Title>
            </div>
            <div class="btnList">
                <div class="btn" v-for="(item, key) in props.dataLeftTwo.obj2.btn" :key="key" @click="changed(key)">{{
                    item }}</div>
            </div>
            <div class="list_2" :class="props.dataLeftTwo.obj2.dataList.length > 3 ? 'list_2_scroll' : ''">
                <div class="listItem_2" v-for="(item, key) in props.dataLeftTwo.obj2.dataList" :key="key">
                    <div class="img_2">
                        <img src="" class="images_2" alt="">
                    </div>
                    <div class="name_2">{{ item.name }}</div>
                    <div class="pross" ref="pross">
                        <span class="pross-before" :style="{ width: getWidth(item) + '%' }"></span>
                    </div>
                    <div class="num_2">{{ getKeyVal(item) }}</div>
                </div>
            </div>
        </div>
        <div class="three">
            <div class="title">
                <Title :title="props.dataLeftThree.obj3.title"></Title>
            </div>
            <div class="list_3">
                <div class="list_top">
                    <div class="list_tr" v-for="(item, key) in props.dataLeftThree.obj3.listTr" :key="key">
                        {{ item }}</div>
                </div>
                <div class="list_m">
                    <!-- <vue3-seamless-scroll :list="props.dataLeftThree.obj3.listTd"  class="scroll" :hover="true" :step="0.5"> -->
                    <div class="list_td" v-for="(item, key) in props.dataLeftThree.obj3.listTd" :key="key">
                        <div class="time_3">{{ item.time }}</div>
                        <div class="name_3">{{ item.type }}</div>
                        <div class="place_3">{{ item.place }}</div>
                    </div>
                    <!-- </vue3-seamless-scroll> -->
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import Title from '@/pages/compontents/title/index.vue'
import { ref, defineProps, onMounted, computed } from 'vue'
const props = defineProps({
    dataLeftOne: {
        typeof: 'Object',
        default: () => { }
    },
    dataLeftTwo: {
        typeof: 'Object',
        default: () => { }
    },
    dataLeftThree: {
        typeof: 'Object',
        default: () => { }
    }
})
let showBtn = ref('people')
let pross = ref(null)
function getKeyVal(item) {
    return item[showBtn.value].on + '  人'
}

function changed(key) {
    if (key == 0) {
        showBtn.value = 'people'
    } else if (key == 1) {
        showBtn.value = 'car'
    }
    else {
        showBtn.value = 'material'
    }
}

function getWidth(item) {
    return item[showBtn.value].on / item[showBtn.value].count * 100
}



onMounted(() => {
    console.log(props.dataLeftTwo.obj2.dataList, 122);
})
</script>

<style scoped src="./index.css"></style>